<!--
@Descripttion 输入框-自动完成 (待完善)
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FInputAutocomplete from '@/components/form/f-input-autocomplete'
  注册组件
    components: {
      FInputAutocomplete
    }
  使用
    <FInputAutocomplete v-model.trim="xxx" />
    <FInputAutocomplete v-model.trim="xxx" :options="[]" api="" :props="{value: 'value', other: 'other'}" :maxlength="50" width="200px" :disabled="false" placeholder="请输入" :autofocus="false" />
    options     Object  默认值([])                                 备选列表 格式:[{value: '', other: ''}]
    api         String  默认值('')                                 远程接口地址
    props       Object  默认值({value: 'value', other: 'other'})   指定字段名称
    maxlength   Number  默认值(50)                                 可输入长度
    width       String  默认值(200px)                              输入框宽度
    disabled    Boolean 默认值(false)                              是否失效
    placeholder String  默认值(请输入)                              默认占位文本
    autofocus   Boolean 默认值(false)                              是否默认聚焦
 -->
<template>
  <el-autocomplete
    :value="value"
    @input="changeVal"
    clearable
    :maxlength="maxlength"
    :style="`width: ${width}`"
    :disabled="disabled"
    :placeholder="placeholder"
    :autofocus="autofocus"
    :fetch-suggestions="querySearch"
    @select="select"
    popper-class="autocomplete"
  >
    <template slot-scope="{ item }">
      <div>{{ item[props.value] }} </div>
      <span v-if="item[props.other]" class="other">{{ item[props.other] }}</span>
    </template>
  </el-autocomplete>
</template>

<script>
import { methodPost } from '@/api'

export default {
  name: 'f-input-autocomplete',
  props: {
    value: {
      required: true
    },
    // 备选列表
    options: {
      type: Array,
      default: () => []
    },
    // 远程地址 格式:[{value: '', other: ''}]
    api: {
      type: String,
      default: ''
    },
    // 指定字段名称
    props: {
      type: Object,
      default() {
        return {
          value: 'value',
          other: 'other'
        }
      }
    },
    // 可输入长度
    maxlength: {
      type: Number,
      default: 50
    },
    // 输入框宽度
    width: {
      type: String,
      default: '200px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please enter')
      }
    },
    // 是否默认聚焦
    autofocus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
    },
    select(item) {
      const value = item[this.props.value]
      this.changeVal(value)
    },
    /**
     * 搜索匹配内容
     * @param {Object} queryString
     * @param {Object} cb
     */
    querySearch(queryString, callback) {
      if (this.api) {
        methodPost(this.api, { keyword: queryString }).then((res) => {
          callback(res.result)
        })
      } else {
        const results = queryString ? this.options.filter(this.createFilter(queryString)) : this.options
        // 调用 callback 返回建议列表的数据
        callback(results)
      }
    },
    /**
     * 数据过滤
     * @param {String} queryString
     */
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant[this.props.value].toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .autocomplete{
    li {
      line-height: normal;
      padding-top: 7px;
      padding-bottom: 7px;
      .other {
        font-size: 12px;
        color: #b4b4b4;
      }
    }
  }
</style>
